<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-事件对象</title>
<!--    导入vue的库文件 在 window 全局就有了 Vue 这个构造函数-->
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<!--    希望 Vue 能够控制下面的这个 div，帮我们在把数据填充到 div 内部-->
<div id="app">
    <p>count的值是：{{ count }}</p>
<!--   如果 count 是偶数，则按钮背景变成红色，否则，取消背景颜色 -->
<!--    提供了内置变量，名字叫做 $event，它就是原生 DOM 的事件对象 e-->
    <button @click="add(1,$event) ">+N</button>
</div>

<script>
    //创建vue的实例对象
    const vm = new Vue({
        el:"#app",
        data:{
           count: 0,
        },

        methods:{
//上面button @click="add">事件中add不带() 不传参数 那么在这里会默认接收到一个对象e
//            如果事件传参了[@click="add(1)"]  那么e将被覆盖掉,如果想解决这个问题，
//            提供了内置变量，名字叫做 $event，它就是原生 DOM 的事件对象 e
          add(n,e) {
              this.count += 1

              //判断this.count的值是否为偶数
              if (this.count % 2 === 0){
                  //偶数
                  e.target.style.backgroundColor='red'
              }else {
                  //基数
                  e.target.style.backgroundColor=''
              }
          }
        },
    });
</script>
</body>
</html>